<!DOCTYPE html>
<html>
<head>
<title>Touch navigation</title>
<!--script>
       window.self.onmousewheel = function(event) {
                console.log(" TOUCH window.self mouse");
				event = event || window.event;
				event.stopPropagation();
            }; 
</script-->
<style>
a:link, a:visited {     color: rgb(98,187,70);    text-decoration: none;    cursor: auto;}
a:link {cursor: pointer;}
body  {color:white;font-family: 'Segoe UI', 'Slate Pro', sans-serif, Helvetica;}
.highlight {color: rgb(98,187,70);}
table {table-layout: fixed; padding: 4px}
</style>
</head>

<body>

<table style="vertical-align: bottom">
	<tr>
		<td><a href="help.html"><img src='img/back.png' style='width:20px;height:auto;' border='0'/></a></td>
		<td><a href="help.html">Back to Help menu</a></td>
	</tr>
</table>
			
<h2>Touch navigation</h2> 
<h3>Orbit mode</h3> 
<table style="width:100%">
  <tr>
    <td style="width:40px"><img src='img/oneFinger.png' style='width:35px;height:auto;' border='0'/></td>
    <td>
		<table >
			<tr><td class ="highlight"><strong>Rotate and tilt</strong></td> </tr>
			<tr><td><i>One finger drag</i></td></tr>
		</table>
	</td>
  </tr>    
  <tr>
    <td style="width:40px"><img src='img/zoom.png' style='width:35px;height:auto;' border='0'/></td>
	<td>
		<table>
			<tr><td class ="highlight"><strong>Zoom</strong></td> </tr>
			<tr><td><i>Two finger pinch</i></td> </tr>
		</table>
	</td>	 
  </tr>
  <tr>
    <td style="width:40px"><img src='img/pan.png' style='width:35px;height:auto;' border='0'/></td>
	<td>
		<table>
			<tr><td class ="highlight"><strong>Pan</strong></td> </tr>
			<tr><td><i>Two finger drag, same direction</i></td> </tr>
		</table>
	</td>	
  </tr>
  <tr>
    <td style="width:40px"><img src='img/rotate.png' style='width:35px;height:auto;' border='0'/></td>
	<td>
		<table>
			<tr><td class ="highlight"><strong>Rotate left and right</strong></td> </tr>
			<tr><td><i>Two finger rotate</i></td> </tr>		
		</table>
	</td>	
  </tr>  
  <tr>
    <td style="width:40px"><img src='img/doubleTap.png' style='width:35px;height:auto;' border='0'/></td>
    <td>
		<table>
			<tr><td class ="highlight"><strong>Bring the tapped point to the center of the screen</strong></td> </tr>
			<tr><td><i>Double tap</i> </td> </tr>
		</table>
	</td> 
  </tr>
</table>

<h3>Pan mode</h3> 
<table style="width:100%">
  <tr>
    <td style="width:40px"><img src='img/oneFinger.png' style='width:35px;height:auto;' border='0'/></td>
    <td>
		<table >
			<tr><td class ="highlight"><strong>Pan</strong></td> </tr>
			<tr><td><i>One finger drag</i></td></tr>
		</table>
	</td>
  </tr>    
  <tr>
    <td style="width:40px"><img src='img/zoom.png' style='width:35px;height:auto;' border='0'/></td>
	<td>
		<table>
			<tr><td class ="highlight"><strong>Zoom</strong></td> </tr>
			<tr><td><i>Two finger pinch</i></td> </tr>
		</table>
	</td>	 
  </tr>
  <tr>
    <td style="width:40px"><img src='img/pan.png' style='width:35px;height:auto;' border='0'/></td>
	<td>
		<table>
			<tr><td class ="highlight"><strong>Rotate and tilt</strong></td> </tr>
			<tr><td><i>Two finger drag, same direction</i></td> </tr>
		</table>
	</td>	
  </tr>
  <tr>
    <td style="width:40px"><img src='img/rotate.png' style='width:35px;height:auto;' border='0'/></td>
	<td>
		<table>
			<tr><td class ="highlight"><strong>Rotate left and right</strong></td> </tr>
			<tr><td><i>Two finger rotate</i></td> </tr>		
		</table>
	</td>	
  </tr>  
  <tr>
    <td style="width:40px"><img src='img/doubleTap.png' style='width:35px;height:auto;' border='0'/></td>
    <td>
		<table>
			<tr><td class ="highlight"><strong>Bring the tapped point to the center of the screen</strong></td> </tr>
			<tr><td><i>Double tap</i> </td> </tr>
		</table>
	</td> 
  </tr>
</table>

<table style="vertical-align: bottom">
	<tr>
		<td><a href="help.html"><img src='img/back.png' style='width:20px;height:auto;' border='0'/></a></td>
		<td><a href="help.html">Back to Help menu</a></td>
	</tr>
</table>

</body>
</html>